@charset "utf-8";
// triangle 输出三角 $size ,$color,$direction
@mixin triangle($size,$color,$direction){
  height: 0;
  width: 0;
  @if($direction==up) or ($direction== down)or ($direction== left) or ($direction== right){
    border-color: transparent;
    border-style: solid;
    border-width: $size/2;
    @if $direction==up{
      border-bottom-color:$color ;
    }@else if $direction == down{
      border-top-color: $color;
    }@else if $direction == left{
      border-right-color: $color;
    }@else if $direction == right{
      border-left-color: $color;
    }
  }@else if ($direction == up-right ) or ($direction == up-left ){
      border-top: $size solid $color;
      @if $direction == up-right{
        border-left: $size solid transparent;
      }@else if $direction == up-left{
        border-right: $size solid transparent;
      }
  }@else if ($direction == down-right ) or ($direction == down-left ){
    border-bottom: $size solid $color;
    @if $direction == down-right{
      border-left: $size solid transparent;
    }@else if $direction == down-left{
      border-right: $size solid transparent;
    }
  }

}

//triangle-single 正三角在标签外
@mixin triangle-single($textColor, $bgColor, $triangleSize,$percent:30%,$direction:right){
    background: $bgColor; color: $textColor; text-align: center; position: relative;
    &:after,span.icon{
      @include triangle($triangleSize,$bgColor,$direction);position: absolute; content: "";
        @if $direction == right  {right: -$triangleSize; top: $percent;}
        @else if $direction == left { left:-$triangleSize; top: $percent;}
        @else if $direction == up { top:-$triangleSize; left:$percent;}
        @else if $direction == down {bottom:-$triangleSize; left: $percent;}
    }
}
//triangle-single 三角在标签内
@mixin triangle-In($textColor, $bgColor, $triangleSize, $triangleColor,$direction:right,$isDouble:false){
  background: $bgColor; color: $textColor; text-align: center; position: relative;
   @if  ($direction== left) or ($direction== right){
    padding: 0px $triangleSize;height: $triangleSize; line-height: $triangleSize;
  }
   @else if ($direction==up) or ($direction== down){
    padding: $triangleSize 0px; width:  $triangleSize;
  }
   @if $isDouble == false{
      &:after,span.icon{
        position: absolute; content: "";
        @if $direction == right  {right: 0px; top: 0px; @include triangle($triangleSize,$triangleColor,left);}
        @else if $direction == left { left:0px; top: 0px;@include triangle($triangleSize,$triangleColor,right);}
        @else if $direction == up { top:0px; left:0px;@include triangle($triangleSize,$triangleColor,down);}
        @else if $direction == down {bottom:0px; left: 0px;@include triangle($triangleSize,$triangleColor,up);}

      }
  }
   @else if $isDouble ==true{
      padding: 0px $triangleSize;height: $triangleSize; line-height: $triangleSize;
      &:after,span.iconRight{position: absolute; content: "";right: 0px; top: 0px; @include triangle($triangleSize,$triangleColor,left);}
      &:before,span.iconLeft{position: absolute; content: "";left:0px; top: 0px;@include triangle($triangleSize,$triangleColor,right);}

  }

}
//triangle-single 直角三角在标签外
@mixin triangle-outer($triangleSize,$triangleColor,$direction:up-right,$isDouble:false){
    position: relative;text-align: center;
    &:after,&:before{ position: absolute; content: "";}
    @if $isDouble == false{
      &:after{ position: absolute; content: "";
        @if $direction==up-right{ bottom:-$triangleSize; left: 0px; @include  triangle($triangleSize,$triangleColor,$direction);}
        @else if $direction== up-left{ bottom:-$triangleSize; right: 0px; @include  triangle($triangleSize,$triangleColor,$direction);}
        @else if $direction==down-right{ top:-$triangleSize; left: 0px; @include  triangle($triangleSize,$triangleColor,$direction);}
        @else if $direction==down-left{ top:-$triangleSize; right: 0px; @include  triangle($triangleSize,$triangleColor,$direction);}
      }
    }
    @else if $isDouble ==true {
      @if $direction ==down{
        &:after{bottom:-$triangleSize; left: 0px; @include  triangle($triangleSize,$triangleColor,up-right);}
        &:before{bottom:-$triangleSize; right: 0px; @include  triangle($triangleSize,$triangleColor, up-left);}
      }
      @else if $direction ==up{
        &:after{top:-$triangleSize; left: 0px; @include  triangle($triangleSize,$triangleColor,down-right);}
        &:before{top:-$triangleSize; right: 0px; @include  triangle($triangleSize,$triangleColor,down-left);}
      }
    }
}



